<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>键盘事件</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
					1.Vue中常用的按键别名（重点掌握）：
							回车 => enter
							删除 => delete (捕获“删除”和“退格”键)
							退出 => esc
							空格 => space
							换行 => tab（必须配合keydown才有效果）
							上 => up
							下 => down
							左 => left
							右 => right

					2.Vue未提供别名的按键如何处理？（了解即可）
								(1).可以使用原生JS中的【按键名】去绑定，但注意多个单词组成要转为kebab-case（短横线命名）！！！
								(2).也可以使用keyCode去指定具体的按键（极其不推荐！！！！）

					3.自定义按键别名（了解即可，官方已不推荐）：
							Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
		 -->
		<!-- 准备好一个容器-->
		<div id="demo">
			<!-- Vue提供别名的按键，如下绑定 -->
			<!-- 按下回车提示输入：<input type="text" @keyup.enter="showUserInput"> <br> -->
			<!-- 按下←提示输入：<input type="text" @keyup.left="showUserInput"> <br> -->

			<!-- ****************************下方的东西了解即可************************************ -->

			<!-- Vue没有提供别名的按键，有两种写法： -->
			<!-- 第一种，用按键编码 -->
			<!-- 按下【切换大小写按键】提示输入：<input type="text" @keyup.20="showUserInput"> <br> -->
			<!-- 第二种，用按键名（但要注意，若是多个单词组成的按键名kebab-case命名法，若不是多个单词组成，那直接写按键名） -->
			<!-- 按下【切换大小写按键】提示输入：<input type="text" @keyup.caps-lock="showUserInput"> <br> -->

			<!-- 按下回车提示数据，一共有这么几种写法 -->
			<!-- 第一种：使用Vue提供的别名 -->
			<!-- <input type="text" @keyup.enter="showUserInput"> <br/> -->
			<!-- 第二种：使用原本就有的按键名 -->
			<!-- <input type="text" @keyup.Enter="showUserInput"> <br/> -->
			<!-- 第三种：使用原本就有的按键编码（不推荐） -->
			<!-- <input type="text" @keyup.13="showUserInput"> <br/> -->

			<!-- 也可以自定义按键别名（不推荐） -->
			<input type="text" @keyup.huiche="showUserInput">
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		// Vue.config.keyCodes.huiche = 13
		
		new Vue({
			el:'#demo',
			methods:{
				showUserInput(e){
					console.log(e.target.value)
				}
			}
		})
	</script>
</html>